<template>
    <div>
        <div class="top">
            <div v-for="item in topItems" :key="item.title" class="top_item">
                <img :src="item.img" alt="icon" class="icon" />
                <span>{{ item.title }}</span>
            </div>
        </div>
        <div class="mid">
            <div v-for="item in midItems" :key="item.title" class="mid_item">
                <img :src="item.img" alt="icon" class="icon">
                <span>{{ item.title }}</span>
            </div>
        </div>
        <Button type="primary">123</Button>
    </div>
</template>

<script setup lang="ts">
import { Button } from 'vant';

let topItems = [
    { title: "新房", img: "/imgs/lh_xf.png" },
    { title: "二手房", img: "/imgs/lh_esf.png" },
    { title: "租房", img: "/imgs/lh_zf.png" },
    { title: "商铺写字楼", img: "/imgs/lh_xzl.png" },
    { title: "海外房产", img: "/imgs/lh_hwfc.png" },
];

let midItems = [
    { title: "未开盘项目", img: "/imgs/lh_wkp.png" },
    { title: "装修", img: "/imgs/lh_zx.png" },
    { title: "找小区", img: "/imgs/lh_zxq.png" },
    { title: "找经纪人", img: "/imgs/lh_jjr.png" },
    { title: "安居问答", img: "/imgs/lh_chat.png" },
    { title: "购房百科", img: "/imgs/lh_gfbk.png" },
    { title: "房贷计算", img: "/imgs/lh_fdjs.png" },
    { title: "出租", img: "/imgs/lh_cz.png" },
    { title: "卖房", img: "/imgs/lh_mf.png" },
    { title: "实拍好房", img: "/imgs/lh_sphf.png" },
];  
</script>

<style scoped>
.top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: .1rem 0;
}

.top_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .1rem;
}

.top .top_item span {
    margin-top: .05rem;
    text-align: center;
    font-size: .3rem;
}

.top .top_item .icon {
    width: 1.3rem;
    height: 1.3rem;
}

.mid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: .1rem 0;
}

.mid_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .2rem;
}

.mid .mid_item span {
    margin-top: .05rem;
    text-align: center;
    font-size: .3rem;
}

.mid .mid_item .icon {
    width: .9rem;
    height: .9rem;
}
</style>